<script setup lang="ts">
import { reactive, ref } from "vue";
import GetRequest from "util/requests/getRequest";
import { onMounted } from "vue";
const props = defineProps(['videoId'])
console.log(props.videoId);
const url = ref("")
const cover = ref("")
const title = ref("")
const  getRequest =  new GetRequest();

onMounted(()=>{
  //获取数据
     getRequest.getVideoById({videoId:props.videoId}).then(
       (res:any)=>{
           cover.value = res.obj.coverUrl
           url.value =res.obj.videoUrl
           title.value = res.obj.videoTitle
           console.log(res);
         }
  )
})
const options = reactive({
  color: "#409eff", //主题色
  title: title, //视频名称
  src: url, //视频源
  width:"90%",
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false,  //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns:['audioTrack', 'quality', 'speedRate', 'volume', 'setting', 'pip', 'pageFullScreen', 'fullScreen'] //显示所有按钮,
})
</script>

<template>
  <div class="container">
       <h1>{{title}}</h1>
       <vue3-video-play  v-bind="options"  :poster=cover></vue3-video-play>
  </div>
</template>

<style scoped>
.container{
  border-radius: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>